<template>
    <div class="demo">
        <h1>当前和为: {{ sum }}</h1>
        <h1>当前和为: {{ bigSum }}</h1>
        <h1>我在 {{ school }} 学习 {{ subject }}</h1>
        <select v-model.number="count">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add(count)">+</button>
        <button @click="sub(count)">-</button>
        <button @click="addWhenOdd(count)">WhenOdd</button>
        <!-- <button @click="addWaitAMonent">WaitAMonent</button> -->
    </div>
</template>

<script>
    import {mapActions, mapGetters, mapState} from 'vuex'
    export default {
        name: 'CountComponent',
        data() {
            return {
                count: 1
            };
        },
        methods: {
            // add() {
            //     this.$store.dispatch('add', this.count);
            // },
            // sub() {
            //     this.$store.dispatch('sub', this.count);
            // },
            // addWhenOdd() {
            //     this.$store.dispatch('addWhenOdd', this.count);
            // },
            // addWaitAMonent() {
            //     setTimeout(() => {
            //         this.$store.dispatch('add', this.count);
            //     }, 1000);
            // },
            ...mapActions(['add','sub','addWhenOdd']),//借助vuex提供的mapActions方法, 把actions中的方法映射到当前组件中, 通过this调用. 注意参数需要传递, 效果和上面的方法同理
            // mapMutations和mapActions的区别: mapMutations只能调用mutations中的方法, mapActions可以调用mutations和actions中的方法
        },
        computed: {
            ...mapState(['sum','school','subject']), // 从store中获取数据, 通过计算属性的方式 ...意思是展开, 也就是把mapState中的所有属性展开到当前对象中, 如果不同名可以使用: mapState({'sum1':'sum','school1':'school','subject1':'subject'}])
            ...mapGetters(['bigSum']) // 从store中获取数据, 通过计算属性的方式 ...意思是展开, 也就是把mapState中的所有属性展开到当前对象中
        }
    };
</script>
<style scoped>
    button {
        margin-left: 10px;
    }
</style>